<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<%-- <title>首页</title> --%>
	<meta name="decorator" content="ems_${site.theme}_front" />
	<meta name="description" content="JeeSite ${site.description}" />
	<meta name="keywords" content="JeeSite ${site.keywords}" />
	<link href="${ctxStatic}/jquery-validation/1.11.1/jquery.validate.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/jquery-validation/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/jquery-validation/1.11.1/jquery.validate.method.min.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			<c:if test="${not empty message}">alert("${message}");</c:if>
			$("#joinForm").validate({
				rules: {
					validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
				},
				messages: {
					content: {required: "请填写留言内容"},
					validateCode: {remote: "验证码不正确"}
				},
				/* errorContainer: "#messageBox", */
				errorPlacement: function(error, element) {
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			/* $("#main_nav li").each(function(){
				$(this).toggleClass("active", $(this).text().indexOf('公共留言')>=0);
			}); */
		});
		
		
		// 本页面生产上调不到base.js里面的方法，估单独引入
		function count(id,oneMoney,multiMoney,joinType)
		{
			var val = $("#"+id).val();
			// var re = /^([0-9|a-z|A-Z|\u4e00-\u9fa5]+)(,[0-9|a-z|A-Z|\u4e00-\u9fa5]+)*$/;
			if(!val)
			{
				$("#joinNum").html("0");
				$("#joinMoney").html("0.00");
			}else 
			// 若含有中文逗号，则替换成英文逗号
			if(val.indexOf("，") > -1){
				val = val.replace(/，/g,",");
				$("#"+id).val(val);
			}else
				
			if(!REG_NAME_COMMA.test(val)){
				return false;
			}else
			{
				// 若含有中文逗号，则替换成英文逗号
				if(val.indexOf("，") > -1){
					
					val = val.replace(/，/g,",");
					$("#"+id).val(val);
				}
				
				var joinNum = val.split(",").length;
				
				$("#joinNum").html(joinNum);
				
				var joinType = $("#" + joinType).val();
				// 没有选择joinType时，不做处理
				if(!joinType)
				{
					return;
				}
				
				var singleMoney = oneMoney;
				// 计算金额
				if("3" == joinType)
				{
					singleMoney = multiMoney;
				}
				var totalMoney = joinNum * singleMoney;
				totalMoney = totalMoney.toFixed(2);
				$("#joinMoney").html(totalMoney);
				
				$("#confirmDiv").show();
			}
		}
		
		// 本页面生产上调不到base.js里面的方法，估单独引入
		function countPaste(id,oneMoney,multiMoney,joinType)
		{
			setTimeout(function(){count(id,oneMoney,multiMoney,joinType);},0); 
		}
	</script>
</head>
<body>
	
	<!--主界面部分-->
	<header class="mui-bar mui-bar-nav" style="background:url('${ctxStatic }/weixin/images/navbg.jpg');"> 
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
			<div style="width:80%; overflow: hidden; margin:0  10%; line-height: 44px; text-align:left; vertical-align: middle; height: 100%;color:#fff;">
			${course.name }
			 </div> 
	</header>
 
		<div class="mui-content" style="padding-top:50px; padding-bottom: 60px; overflow-y: scroll; height:auto;">
			<div class="mui-content-padded" style="margin-top: 30px;">	 
		     		<h3 style="text-align: center;">${course.name }</h3> 
		     	<div style="padding: 20px; font-size: 14px; color: #999;">
				 <form id="joinForm" action="${ctx }/weixin/saveJoin" method="post">
				 
				 <input type="hidden" id="orderId" name="order.id">
				 <input type="hidden" id="courseId" name="course.id" value="${course.id }">
				 <input type="hidden" id="token" name="token" value="${token }">
				 <input type="hidden" id="orderFrom" name="orderFrom" value="mobile">
				 
	   			<div class="mui-input-row"  >
					<textarea id="joiner" name="joiner" rows="5" placeholder="选手姓名" style="margin-bottom: 0px;" onkeyup="count('joiner','${course.oneMoney}','${course.multiMoney}','joinType');" onpaste="countPaste('joiner','${course.oneMoney}','${course.multiMoney}','joinType');" onchange="count('joiner','${course.oneMoney}','${course.multiMoney}','joinType');"></textarea>
					<font style="font-size: 12px;color: #f30; margin-bottom: 10px;">*多个姓名请以逗号隔开</font>
				</div>
				
				<!-- 艺术类才展示 -->
				<c:if test="${course.sign eq 'art'}">
					<div class="mui-input-row">
			     		<select  class="mui-btn mui-btn-block" id="sex" name="sex" style="width: 100%;border: 1px solid #ccc;padding: 0;">
				     		<option value="">性别</option>
					  		<option value="1">男</option>
					  		<option value="0">女</option>
			     		
			     		</select>
			       </div>
			       <div class="mui-input-row">
			     		<input type="text" id="birth" name="birth" maxlength=10 placeholder="出生年月 (输入格式:YYYY-MM-DD)"/>
			       </div>
			       <div class="mui-input-row">
			     		<input type="text" id="age" name="age" maxlength=3 placeholder="年龄"/>
			       </div>
		       </c:if>
				
		     	<div class="mui-input-row">
		     		<select  class="mui-btn mui-btn-block" id="groupType" name="groupType" style="width: 100%;border: 1px solid #ccc;padding: 0;">
			     		<option value="">组别</option>
			     		<c:forEach items="${fns:getDictList('course_group_type')}" var="groupType">
				  			<option value="${groupType.value }">${groupType.label }</option>
				  		</c:forEach>
		     		
		     		</select>
		       </div>
		       
		       <!-- 艺术类才展示 -->
			   <c:if test="${course.sign eq 'art'}">
			       <div class="mui-input-row">
			     		<input type="text" id="addr" name="addr" placeholder="籍贯(省/市)"/>
			       </div>
			       <div class="mui-input-row">
			     		<input type="text" id="nation" name="nation" placeholder="民族"/>
			       </div>
			       <div class="mui-input-row">
			     		<input type="text" id="idCard" name="idCard" placeholder="身份证号码"/>
			       </div>
		       </c:if>
		       
		       <div class="mui-input-row">
		     		<select  class="mui-btn mui-btn-block" id="bigCategory" name="bigCategory" onchange="setSubCategory(this,'smallCategory');" style="width: 100%;border: 1px solid #ccc;padding: 0;">
			     		<option value="">${course.sign eq 'paint'?'展示类型':'展示大类'}</option>
			     		<c:forEach items="${bigCategories}" var="bigCat">
				  			<option value="${bigCat.value }" type="${bigCat.type}">${bigCat.name }</option>
				  		</c:forEach>
		     		
		     		</select>
		       </div>
		       <div class="mui-input-row" id="subCategoryDiv" style="display: ${course.sign eq 'paint'?'none':'block'}">
		     		<select  class="mui-btn mui-btn-block" id="smallCategory" name="smallCategory" style="width: 100%;border: 1px solid #ccc;padding: 0;">
			     		<option value="">展示小类</option>
		     		
		     		</select>
		       </div>
		       
		       <!-- 艺术类才展示 -->
			   <c:if test="${course.sign eq 'art'}">
			       <div class="mui-input-row">
			     		<select  class="mui-btn mui-btn-block" id="level" name="level" style="width: 100%;border: 1px solid #ccc;padding: 0;">
				     		<option value="">专业等级</option>
					  		<option value="0">0级</option>
					  		<option value="1">1级</option>
					  		<option value="2">2级</option>
					  		<option value="3">3级</option>
					  		<option value="4">4级</option>
					  		<option value="5">5级</option>
					  		<option value="6">6级</option>
					  		<option value="7">7级</option>
					  		<option value="8">8级</option>
					  		<option value="9">9级</option>
					  		<option value="10">10级</option>
			     		
			     		</select>
			       </div>
		       </c:if>
		       
		       <div class="mui-input-row">
		     		<select  class="mui-btn mui-btn-block" id="joinType" name="joinType" onchange="count('joiner','${course.oneMoney}','${course.multiMoney}','joinType');" style="width: 100%;border: 1px solid #ccc; padding: 0;">
		     		<option>展示方式</option>
		     		<c:forEach items="${fns:getDictList('course_join_type')}" var="groupType">
			  			<option value="${groupType.value }">${groupType.label }</option>
			  		</c:forEach>
		     		</select>
		       </div>
		       
				<div class="mui-input-row">
		     		<input type="text" id="school" name="school" placeholder="推选学校"/>
		     	</div>
				
				<div class="mui-input-row">
		     		<input type="text" id="remarks" name="remarks" placeholder="备注(初选地点)"/>
		     	</div>
		     	
		     	<div class="mui-input-row">
		     		<input type="text" id="register" name="register" placeholder="家长姓名"/>
		     	</div>
		     	<div class="mui-input-row">
		     		<input type="text" id="mobile" name="mobile" placeholder="家长电话"/>
		     	</div>
		     	
		     	<div class="mui-input-row">
				<!-- <label class="control-label">验证码:</label> -->
				<!-- <label>验证码:</label> -->
				<sys:validateCode name="validateCode" frontType="weixin"/>
		  		</div>
		     	
		     	<div class="mui-input-row" id="confirmDiv" style="display: none;">
		     		报名人数:<font id="joinNum" color="red" style="font-size: 18px;font-weight: 600;">0</font>人,
		  			&nbsp;应付金额:<font id="joinMoney" color="red" style="font-size: 18px;font-weight: 600;">0.00</font>元
		     	</div>
		     	
		     	<center><button type="button" id="subButton" class="mui-btn mui-btn-primary" onclick="saveJion('joinForm','${course.sign}');">确认信息</button></center>
				 </form>
		     	</div>
		     </div>
		    
		     
		     <br />
		</div>
</body>
</html>